<template>
  <view class="page-container">
    <!-- 顶部导航栏 -->
    <uni-nav-bar
      :border="false"
      title="大额收款详情"
      fixed
      left-icon="back"
      @clickLeft="goBack"
    />

    <!-- 内容区域 -->
    <view class="content">
      <!-- 加载状态 -->
      <view v-if="detailLoading" class="loading-wrapper">
        <uni-load-more status="loading" />
      </view>

      <!-- 详情内容 -->
      <view v-else-if="orderDetail.id">
        <!-- 订单基本信息 -->
        <view class="order-header">
          <view class="order-number">{{ orderDetail.orderNo }}</view>
          <view
            class="order-status"
            :class="getStatusClass(orderDetail.status)"
          >
            {{ orderDetail.statusText }}
          </view>
        </view>

        <!-- 金额信息 -->
        <view class="amount-card">
          <view class="amount-label">订单金额</view>
          <view class="amount-value">¥ {{ orderDetail.totalAmount }}</view>
        </view>

        <!-- 订单详情 -->
        <view class="detail-section">
          <view class="section-title">订单信息</view>
          <view class="detail-list">
            <view class="detail-item">
              <text class="detail-label">订单号</text>
              <view class="detail-value-wrapper">
                <text class="detail-value">{{ orderDetail.orderNo }}</text>
                <text class="copy-btn" @click="copyText(orderDetail.orderNo)">
                  复制
                </text>
              </view>
            </view>
            <view class="detail-item">
              <text class="detail-label">交易流水号</text>
              <text class="detail-value">{{ orderDetail.transactionId }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">商户名称</text>
              <text class="detail-value">{{ orderDetail.merchantName }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">商品名称</text>
              <text class="detail-value">{{ orderDetail.goodsName }}</text>
            </view>
            <view v-if="orderDetail.goodsNumber" class="detail-item">
              <text class="detail-label">商品数量</text>
              <text class="detail-value">{{ orderDetail.goodsNumber }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">支付方式</text>
              <text class="detail-value">{{ orderDetail.payWayText }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">下单时间</text>
              <text class="detail-value">{{ orderDetail.createTime }}</text>
            </view>
            <view v-if="orderDetail.payTime" class="detail-item">
              <text class="detail-label">支付时间</text>
              <text class="detail-value">{{ orderDetail.payTime }}</text>
            </view>
          </view>
        </view>

        <!-- 收货信息（如果有） -->
        <view
          v-if="orderDetail.recipientsName || orderDetail.recipientsMobile"
          class="detail-section"
        >
          <view class="section-title">收货信息</view>
          <view class="detail-list">
            <view v-if="orderDetail.recipientsName" class="detail-item">
              <text class="detail-label">收货人</text>
              <text class="detail-value">{{ orderDetail.recipientsName }}</text>
            </view>
            <view v-if="orderDetail.recipientsMobile" class="detail-item">
              <text class="detail-label">联系电话</text>
              <text class="detail-value">{{
                orderDetail.recipientsMobile
              }}</text>
            </view>
            <view v-if="orderDetail.recipientsAddress" class="detail-item">
              <text class="detail-label">收货地址</text>
              <text class="detail-value">{{
                orderDetail.recipientsAddress
              }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 无数据 -->
      <Empty v-else-if="!detailLoading" text="暂无数据" />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { getBigReceiptOrderList } from "@/api/mine";
import { useUserStore } from "@/store/modules/user";
import { useStoreStore } from "@/store/modules/store";
import { useRequest } from "ahooks-vue";
import dayjs from "dayjs";
import Empty from "@/components/common/Empty/Empty.vue";

const userStore = useUserStore();
const storeStore = useStoreStore();

// 订单ID
const orderId = ref("");

// 订单详情数据
const orderDetail = ref({
  id: "",
  orderNo: "",
  transactionId: "",
  merchantName: "",
  goodsName: "",
  goodsNumber: 0,
  totalAmount: "0.00",
  status: "",
  statusText: "",
  payWayText: "",
  createTime: "",
  payTime: "",
  recipientsName: "",
  recipientsMobile: "",
  recipientsAddress: "",
});

// 获取订单详情
const { loading: detailLoading, run: getOrderDetailRun } = useRequest(
  (id) => {
    return getBigReceiptOrderList({
      isMerchant: 1,
      merchantId: storeStore.storeId,
      userId: userStore.userId,
      offset: 1,
      limit: 10,
      id: Number(id),
    });
  },
  {
    manual: true,
    onSuccess: (res) => {
      console.log("获取大额收款详情成功:", res);
      if (res && res.data && res.data.rows && res.data.rows.length > 0) {
        const item = res.data.rows[0];

        // 映射订单数据
        orderDetail.value = {
          id: item.id,
          orderNo: item.orderTradeId || "",
          transactionId: item.orderTradeFatherId || "",
          merchantName: item.merchantName || "",
          goodsName: item.tradeGoodsName || "",
          goodsNumber: item.tradeNumber || 0,
          totalAmount: (Number(item.tradeMoney) || 0).toFixed(2),
          status: getOrderStatus(item.tradeStatus),
          statusText: getOrderStatusText(item.tradeStatus),
          payWayText: getPayWayText(item.payWay),
          createTime: item.tradeTime
            ? dayjs(item.tradeTime).format("YYYY-MM-DD HH:mm:ss")
            : "",
          payTime: item.payTime
            ? dayjs(item.payTime).format("YYYY-MM-DD HH:mm:ss")
            : "",
          recipientsName: item.recipientsName || "",
          recipientsMobile: item.recipientsMobile || "",
          recipientsAddress: item.recipientsAddress || "",
        };

        console.log("订单详情映射:", orderDetail.value);
      }
    },
    onError: (err) => {
      console.error("获取大额收款详情失败:", err);
      uni.showToast({
        title: "获取详情失败",
        icon: "none",
      });
    },
  }
);

// 获取订单状态
const getOrderStatus = (tradeStatus) => {
  switch (tradeStatus) {
    case 0:
      return "pending"; // 待支付
    case 1:
      return "pending"; // 待发货
    case 2:
      return "pending"; // 待收货
    case 3:
      return "cancelled"; // 已取消
    case 4:
      return "completed"; // 已完成
    default:
      return "unknown";
  }
};

// 获取订单状态文本
const getOrderStatusText = (tradeStatus) => {
  switch (tradeStatus) {
    case 0:
      return "待支付";
    case 1:
      return "待发货";
    case 2:
      return "待收货";
    case 3:
      return "已取消";
    case 4:
      return "已完成";
    default:
      return "未知";
  }
};

// 获取支付方式文本
const getPayWayText = (payWay) => {
  switch (payWay) {
    case 1:
      return "支付宝";
    case 2:
      return "微信";
    case 3:
      return "衫德";
    case 4:
      return "余额";
    case 10:
      return "汇聚";
    default:
      return "未知";
  }
};

// 获取状态样式类
const getStatusClass = (status) => {
  switch (status) {
    case "completed":
      return "status-success";
    case "pending":
      return "status-pending";
    case "cancelled":
      return "status-cancelled";
    default:
      return "";
  }
};

// 复制文本
const copyText = (text) => {
  uni.setClipboardData({
    data: text,
    success: () => {
      uni.showToast({
        title: "复制成功",
        icon: "none",
      });
    },
  });
};

// 返回
const goBack = () => {
  uni.navigateBack();
};

// 页面加载
onLoad((options) => {
  console.log("大额收款详情页面参数:", options);

  // 从本地缓存恢复店铺信息和用户信息
  storeStore.hydrateFromStorage();
  userStore.hydrateFromStorage();

  if (options.id) {
    orderId.value = options.id;
    console.log("订单ID:", orderId.value);

    // 加载订单详情
    if (storeStore.storeId && userStore.userId) {
      getOrderDetailRun(orderId.value);
    } else {
      console.warn("缺少商户ID或用户ID");
      uni.showToast({
        title: "缺少必要信息，请先登录",
        icon: "none",
      });
    }
  } else {
    console.error("缺少订单ID");
    uni.showToast({
      title: "缺少订单ID",
      icon: "none",
    });
  }
});

onMounted(() => {
  console.log("大额收款详情页面加载完成");
});
</script>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx 30rpx;
  padding-bottom: 40rpx;
}

// 加载状态
.loading-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 600rpx;
  padding: 100rpx 0;
}

// 订单头部
.order-header {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.order-number {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
  margin-right: 20rpx;
  word-break: break-all;
}

.order-status {
  font-size: 26rpx;
  padding: 8rpx 20rpx;
  border-radius: 8rpx;
  flex-shrink: 0;

  &.status-success {
    color: #4caf50;
    background-color: #e8f5e9;
  }

  &.status-pending {
    color: #ff9900;
    background-color: #fff8e1;
  }

  &.status-cancelled {
    color: #f44336;
    background-color: #ffebee;
  }
}

// 金额卡片
.amount-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 40rpx 32rpx;
  margin-bottom: 20rpx;
  text-align: center;
}

.amount-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.amount-value {
  font-size: 56rpx;
  font-weight: 700;
  color: #ff9900;
}

// 详情区域
.detail-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 24rpx;
}

.detail-list {
  .detail-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }
  }
}

.detail-label {
  font-size: 28rpx;
  color: #666;
  flex-shrink: 0;
  width: 180rpx;
}

.detail-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  text-align: right;
  word-break: break-all;
}

.detail-value-wrapper {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex: 1;
  justify-content: flex-end;

  .detail-value {
    flex: 1;
  }

  .copy-btn {
    font-size: 26rpx;
    color: #fabc02;
    // flex-shrink: 0;
    // padding: 4rpx 16rpx;
    // background-color: #fff8e1;
    // border-radius: 6rpx;

    &:active {
      opacity: 0.8;
    }
  }
}
</style>
